<script setup lang="ts">
import { ref } from "vue";
import { useRoute } from "vue-router";
import NoticeMessagePage from "./NoticeMessagePage.vue";
import { getAllMaterialAPI } from "../api/section.ts";
import { Material } from "../index";

const route = useRoute();
const materials = ref<Material[]>([]);
const isLoading = ref(true);
getAllMaterialAPI()
  .then((response) => {
    if (response.status !== 200) {
      isLoading.value = false;
      throw new Error("网络错误");
    }
    return response.data;
  })
  .then((result) => {
    materials.value = result.data;
    isLoading.value = false;
  });
</script>

<template>
  <el-row
    v-loading="isLoading"
    class="h-screen overflow-x-scroll"
    style="position: relative"
  >
    <div
      class="overflow-hidden hover:overflow-visible fixed max-width-side mx-3"
    >
      <el-menu router class="h-full overflow-auto min-w-max">
        <!--        <el-menu-item-->
        <!--          class="text-2xl bg-gray-200"-->
        <!--          style="background-color: #84638e; color: white"-->
        <!--        >-->
        <!--          <template #title>目录</template>-->
        <!--        </el-menu-item>-->
        <el-menu-item
          v-for="material in materials"
          :key="material.id"
          :index="material.id.toString()"
        >
          <template #title
            >{{ material.title.substring(0, 15)
            }}{{ material.title.length > 15 ? "..." : "" }}
          </template>
        </el-menu-item>
      </el-menu>
    </div>
    <el-col :span="4">&nbsp;</el-col>
    <el-col :span="18" class="mx-auto my-2">
      <div class="card min-h-full bg-white">
        <NoticeMessagePage v-if="!route.params.id" />
        <router-view></router-view>
      </div>
    </el-col>
  </el-row>
</template>

<style scoped></style>
